import React,{useEffect,useState} from 'react'
import {useHistory,useParams} from 'react-router-dom'
import * as api from './server'

const Topic = (props) => {
    //Route中component可以得到 props
    // console.log(props);//动态路由 topic/:id不能得到结果，需要用hooks

    // const data=useParams();//动态路由配置的对象，可以解构
    const {id}=useParams();

    const [detail,setDetail]=useState({});

    useEffect(()=>{
        //查看收藏列表
        api.getCollect('HL1115')
        .then(res=>{
            console.log(res.data);
        })
 
        api.getTopic(id)
        .then(res=>{
            console.log(res)
            setDetail(res.data);
        })


        
    },[])


    // const createTopic =()=>{
    //     api.createTopic({
    //         accessToken:'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
    //         title:'hello',
    //         tab:'dev',
    //         content:'<h2>测试</h2>'
    //     })
    //     .then(res=>{
    //         if(res.success){
    //             alert('发布成功')
    //         }
    //     })
    // }

    const collectTopic =()=>{
        api.collectTopic({
            accesstoken:'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
            topic_id:id
        })
        .then(res=>{
            if(res.success){
                alert('收藏成功')
            }
        })
    }

    const delCollectTopic =()=>{
        api.delCollection({
            accesstoken:'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
            topic_id:id
        })
        .then(res=>{
            if(res.success){
                alert('取消收藏成功')
            }
        })
    }
  return (
    <div>
        {/* <button onClick={createTopic}>发布主题</button> */}
        <h2>{detail.title}</h2>
        <button onClick={collectTopic}>收藏主题</button>
        <button onClick={delCollectTopic}>取消收藏</button>

        <div dangerouslySetInnerHTML={{__html:detail.content}} ></div> 
        {/* {content}  会有代码*/}
        {/* <div dangerouslySetInnerHTML={ {__html:props.loaction.state.content} } ></div> */}

    </div>
  )
}

export default Topic